<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Redis-注册中心</title>
        <meta name="description" content="Redis-注册中心">
        <meta name="keywords" content="Redis-注册中心">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <link href="../plugins/quill/quill.snow.css" rel="stylesheet">
        <link href="../plugins/quill/quill.bubble.css" rel="stylesheet">
        <link href="../plugins/quill/quill.core.css" rel="stylesheet">
        <script src="../plugins/quill/quill.js"></script>

    </head>
    <body class="hold-transition">

        <div id="app">
            <div class="content-header">
                <h1 aria-label="center">Redis-注册中心</h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <div class="box">
                    <div><h3 aria-label="center">基本信息</h3></div>

                    <el-table  size="small" current-row-key="id"
                               :data="dataList" stripe highlight-current-row
                               :cell-style="cellStyle"
                               @selection-change="handleSelectionChange">
                        <el-table-column
                                type = 'selection'
                                label="是否选中"
                                width="45"
                                prop="nId">
                        </el-table-column>
                        <el-table-column label="服务名" align="center" prop="appName" ></el-table-column>
                        <el-table-column label="服务URL" align="center" prop="url" ></el-table-column>
                        <el-table-column label="权重值" align="center" prop="weight"></el-table-column>

                        <el-table-column label="存活状况" align="center" prop="alive"></el-table-column>


                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button slot="reference" type="primary" size="mini" prop="href"  @click="gotoHref(scope.row)">查看详情</el-button>

<!--                                    <el-button size="mini" type="danger" @click="adviceOutline(scope.row)">下线服务</el-button>-->
                            </template>
                        </el-table-column>



                    </el-table>

                    <div class="pagination-container">
                        <el-pagination
                            class="pagiantion"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="pagination.total">
                        </el-pagination>
                    </div>

                    <div><h3 aria-label="center">已提供的服务</h3></div>

                    <el-table  size="small" current-row-key="id"
                               :data="dataList2" stripe highlight-current-row
                               :cell-style="cellStyle"
                               @selection-change="handleSelectionChange">
                        <el-table-column
                                type = 'selection'
                                label="是否选中"
                                width="45"
                                prop="nId">
                        </el-table-column>
                        <el-table-column label="服务接口名称" align="center" prop="interfaceName" ></el-table-column>
                        <el-table-column label="服务提供者" align="center" prop="providerName" ></el-table-column>
                        <el-table-column label="服务实现" align="center" prop="instanceName" ></el-table-column>
                        <el-table-column label="服务详情" align="center" prop="details" ></el-table-column>

                    </el-table>

                    <div class="pagination-container">
                        <el-pagination
                                class="pagiantion2"
                                @current-change="handleCurrentChange2"
                                :current-page="pagination2.currentPage"
                                :page-size="pagination2.pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="pagination2.total">
                        </el-pagination>
                    </div>


                </div>
            </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>


    <script src="../plugins/quill/vue-quill-editor.js"></script>
    <script>

        var vue = new Vue({
            el: '#app',
            data:{
                pagination: {//分页相关模型数据
					  currentPage: 1,//当前页码
					  pageSize:5,//每页显示的记录数
					  total:0,//总记录数
					  queryString:null,//查询条件
                      sId:0//学校id
				},
                pagination2:{//分页相关模型数据
                    currentPage: 1,//当前页码
                    pageSize:5,//每页显示的记录数
                    total:0,//总记录数
                    queryString:null,//查询条件
                    sId:0//学校id
                },
				dataList: [],
                dataList2: [],
                showDetais:false,
                treeNode: [{
                    label: '基本信息',
                    children:[
                        {
                            label: '是否存活',
                            children:[{
                                label:''
                            }]
                        },
                        {   label: '服务名',
                            children:[{
                                label:''
                            }]
                        },
                        {   label: 'url',
                            children:[{
                                label:''
                            }]
                        },
                        {   label: '权值',
                            children:[{
                                label:''
                            }]
                        },
                    ],
                }, {
                    label: '提供的服务',
                    children: []
                }, {
                    label: '引用(需要)的服务',
                    children: []
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
            },
            //钩子函数，VUE对象初始化完成后自动执行
            created() {
                //初始化后自动分页查询
                this.findPage();
                this.findPage2();

            },
            methods: {
                cellStyle ({ row, column, rowIndex, columnIndex }) {
                    // 状态列字体颜色
                    if (row.alive === 'ALIVE' && columnIndex === 4) {
                        return 'color: #0CB618'
                    } else if (row.alive === 'DEAD' && columnIndex === 4) {
                        return 'color: #EA1B29'
                    } else {
                        return 'color: #1a1a1b'
                    }
                },
                //分页查询
                findPage() {
                    axios.post("/server/list",this.pagination).then((res)=>{
                        if (res.data.success){
                            this.dataList = res.data.data.list;
                            this.pagination.total = res.data.data.total;
                        }
                    }).catch((error)=>{
                        if (error == "Error: Request failed with status code 403"){
                            this.$message.error("无操作权限");
                        }
                    });

                },
                findPage2(){
                    axios.post("/server/services",this.pagination2).then((res)=>{
                        if (res.data.success){
                            this.dataList2 = res.data.data.list;
                            this.pagination2.total = res.data.data.total;
                        }
                    }).catch((error)=>{
                        if (error == "Error: Request failed with status code 403"){
                            this.$message.error("无操作权限");
                        }
                    });
                },



                findSearchPage(){
                    this.pagination.currentPage = 1;
                    this.findPage();
                },
                clearTree(){
                    console.log("clear..")
                    this.treeNode[1].children.length=0
                    this.treeNode[2].children.length=0
                },
                getDetails(row){
                    //查看服务详情页

                    axios.get("/server/getByappName/"+row.appName,).then((res)=>{
                        if (res.data.success){
                            this.treeNode[0].children[0].children[0].label=res.data.data.appBean.alive;
                            this.treeNode[0].children[1].children[0].label=res.data.data.appBean.appName;
                            this.treeNode[0].children[2].children[0].label=res.data.data.appBean.url;
                            this.treeNode[0].children[3].children[0].label=res.data.data.appBean.weight;

                            this.treeNode[1].children.length=0
                            this.treeNode[2].children.length=0

                            var rs=res.data.data.registedServices;
                            var rrs=[]
                            for (i = 0; i < rs.length; i++) {
                                cld={
                                    label:rs[i]
                                }
                                rrs.push(cld)
                            }
                            this.treeNode[1].children=rrs

                            var ns=res.data.data.needingsServices;
                            var nns=[]
                            for (i = 0; i < ns.length; i++) {
                                var cld={
                                    label:ns[i]
                                }
                                nns.push(cld)
                            }
                            this.treeNode[2].children=nns

                        }
                    })

                },
                handleNodeClick(data) {

                    console.log(data);
                },
                gotoHref(row){
                    // console.log(row.appName +" ....===><")
                    //跳转到服务详情页
                    window.open("/pages/details.html?appName="+row.appName);
                },
                //切换页码
                handleCurrentChange(currentPage) {
                    this.pagination.currentPage = currentPage;
                    this.findPage();
                },
                handleCurrentChange2(currentPage) {
                    this.pagination2.currentPage = currentPage;
                    this.findPage2();
                },
            }
        });
        Vue.use(window.VueQuillEditor);
    </script>
<style>
    .item {
        margin-top: 10px;
        margin-right: 40px;
    }
</style>
</html>